<template>
	<view class="detail-container">

		<view class="main">
			<view class="list">
				<view class="item" v-for="item in list" :key="item.key">
					<text>{{item.title}};安全区高度{{safeBottom}}</text>
				</view>
			</view>
		</view>

		<view class="footer" :style="{paddingBottom:safeBottom + 'px'}">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" />
		</view>
	</view>
</template>
<script>
	export default {

		data() {
			return {
				safeBottom: 0,
				height: 0,
				list: [],
				options: [{
					icon: 'chat',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "#f5f5f5"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
						color: '#fff'
					}
				]
			};
		},
		mounted() {
			const {
				safeAreaInsets
			} = uni.getSystemInfoSync()
			console.log(safeAreaInsets?.top, 'safeAreaInsets?.top')
			this.safeBottom = safeAreaInsets?.bottom
			// this.height = 100vh - safeAreaInsets?.bottom - 50
			// console.log()
			let list = []
			for (let i = 0; i < 25; i++) {
				list.push({
					key: i,
					title: `标题_${i+1}`
				})
			}
			this.list = list
		}
	}
</script>

<style lang="scss" scoped>
	.detail-container {
		height: 100%;
		background-color: #fff;
		// height: calc(100vh - var(--window-bottom) - 50px);
	}

	.header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		font-size: 40rpx;
		color: deeppink;
	}

	.main {
		overflow: hidden;
		height: calc(100vh - var(--window-bottom) - 50px);
		// height: calc(100vh - 50px);
		background-color: #fff;
	}

	.list {
		height: 100%;
		padding-bottom: 0rpx;
		overflow-y: auto;
		.item {
			height: 100rpx;
			background: #c88;
			color: #fff;
			font-size: 40rpx;
			margin-bottom: 40rpx;
		}
	}

	.footer {
		position: fixed;
		background-color: #fff;
		bottom: 0;
		// bottom: var(--window-bottom);  // 小程序为0； H5为TabBar 的高度
		left: 0;
		right: 0;
	}
</style>